<template>
  <div class="my_view">
    <!-- 背景区域 -->
    <div class="bg">
      <div class="user_msg" @click="goLogin">
        <div class="user_cover">
          <img v-lazy="userCover" alt="" />
        </div>
        <div class="nickname">
          <span>{{ username }}</span>
        </div>
      </div>
    </div>
    <!-- 分享 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <!-- 内容区域 -->
    <div class="my_content">
      <div class="my_box">
        <div
          class="my_item"
          v-for="item in iconArr"
          :key="item.id"
          @click="pushRouter(item.methods)"
        >
          <div class="child">
            <div class="icon">
              <i
                :class="['iconfont', item.icon]"
                :style="'color:' + item.color + ';'"
              ></i>
            </div>
            <p class="text">{{ item.text }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部区域 -->
    <footernav />
  </div>
</template>

<script>
import { Toast } from "vant";
import footernav from "../components/base/footernav.vue";
export default {
  name: "my",
  data() {
    return {
      userCover:
        "https://img0.baidu.com/it/u=2076557346,1854499462&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      // 静态数据
      iconArr: [
        {
          id: 1,
          icon: "icon-xiaoxi1",
          color: "#dbb0f1",
          text: "我的消息",
          methods: "goMyNews",
        },
        {
          id: 2,
          icon: "icon-wodeshudan",
          color: "#e8bf6c",
          text: "我的书单",
          methods: "goMyBooklist",
        },
        {
          id: 3,
          icon: "icon-zuijinchangyong",
          color: "#86daca",
          text: "我看过的",
          methods: "goMySeen",
        },
        {
          id: 4,
          icon: "icon-fenxiang",
          color: "#eb977b",
          text: "分享应用",
          methods: "goShareApp",
        },
        {
          id: 5,
          icon: "icon-pingfen",
          color: "#e57aa3",
          text: "去评分",
          methods: "goAppstore",
        },
        {
          id: 6,
          icon: "icon-huancun",
          color: "#99d4ee",
          text: "缓存管理",
          methods: "goCache",
        },
        {
          id: 7,
          icon: "icon-huanfu",
          color: "#9dbbf1",
          text: "换肤",
          methods: "goSkin",
        },
        {
          id: 8,
          icon: "icon-shezhi",
          color: "#f4cf71",
          text: "设置",
          methods: "goSet",
        },
      ],
      // 分享
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      showShare: false, //分享
      username: "游客模式",
    };
  },
  methods: {
    // 点击各种图标
    pushRouter(str) {
      // 我看过的
      if (str == "goMySeen") {
        this.$router.push({
          name: "recentlyread",
          query: { title: "我看过的" },
        });
      }
      // 去评分
      else if (str == "goAppstore") {
        Toast("APP上架需要您的投资!");
      }
      // 缓存管理
      else if (str == "goCache") {
        Toast("有vip章节不让下载");
      }
      // 换肤
      else if (str == "goSkin") {
        Toast("为什么要换,绿油油的不好看么?");
      }
      // 设置
      else if (str == "goSet") {
        Toast("不知道写啥了,给您拜个早年吧!");
      }
      // 分享应用
      else if (str == "goShareApp") {
        this.showShare = true;
      }
      // 我的消息
      else if (str == "goMyNews") {
        this.$router.push({ name: "mynews", query: { title: "我的消息" } });
      }
      // 我的书单
      else if (str == "goMyBooklist") {
        this.$router.push({ name: "mybooklist", query: { title: "我的书单" } });
      }
    },
    // 登录
    goLogin() {
      this.$router.push({ name: "login" });
    },
  },
  created() {
    if (this.$route.query.username == "元气少女蔡徐坤") {
      this.username = this.$route.query.username;
      this.userCover =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fbc4f4942d4f56dfb81d1ce04f2703d3867f9262d.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644425701&t=a138b9e0bd35e66164da09cac63034ae";
    }
  },
  activated() {
    if (this.$route.query.username == "元气少女蔡徐坤") {
      this.username = this.$route.query.username;
      this.userCover =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fbc4f4942d4f56dfb81d1ce04f2703d3867f9262d.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644425701&t=a138b9e0bd35e66164da09cac63034ae";
    }
  },
  components: { footernav },
};
</script>

<style lang="less">
.my_view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .bg {
    flex: 0 0 110px;
    background-color: #52b594;
    display: flex;
    align-items: center;
    .user_msg {
      display: flex;
      width: calc(100% - 60px);
      padding: 0 30px;
      .user_cover {
        flex: 0 0 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .nickname {
        display: flex;
        flex: 1;
        align-items: center;
        color: #fff;
        padding-left: 12px;
      }
    }
  }
  .my_content {
    flex: 1;
    margin-bottom: 50px;
    .my_box {
      padding-top: 15px;
      display: flex;
      flex-wrap: wrap;
      .my_item {
        flex: 0 0 33.33333%;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        .icon {
          i {
            font-size: 30px;
          }
        }
        .text {
          font-size: 14px;
          color: #5d5d5d;
          padding-top: 4px;
        }
      }
    }
  }
}
</style>